import QtQuick 2.0
import QtGraphicalEffects 1.0
import QtQuick.Controls 2.5
import QtQuick 2.14

import "../commonUI"
import "../basic"

Row {

    Rectangle {
        id: backForwardRect
        width: 24
        height: 35
        color: "transparent"
        border.width: 1
        border.color: "#2b2b31"
        radius: 4
        Image {
            id: arrowImg
            anchors.centerIn: parent
            source: "qrc:/img/Resources/title/arrow.png"
            width: parent.width
            height: parent.height
            layer.enabled: false
            layer.effect: ColorOverlay {
                source: arrowImg
                color: "white"
            }
            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                onEntered: {
                    arrowImg.layer.enabled = true
                }
                onExited: {
                    arrowImg.layer.enabled = false
                }
                onClicked: {
                    console.log("当前行为栈的深度：", BasicConfig.behaviorStack.length)
                    BasicConfig.behaviorStack.pop()()   // BasicConfig.behaviorStack.pop() 拿到了一个函数，再加上一个() 就是执行这个函数
                }
            }
        }
    }

    JtomSrarchBox {
        id: searchTextField
        height: backForwardRect.height
        width: 280
        placeholderText: qsTr("晴天")
        font.pixelSize: 16
        font.family: BasicConfig.commFont
        leftPadding: 44
        color: "white"
    }

    ListModel {
        id: searchSingModel
        ListElement { singName: "在你的身边" }
        ListElement { singName: "夏天" }
        ListElement { singName: "哪里都是你" }
        ListElement { singName: "我不配" }
        ListElement { singName: "素颜" }
        ListElement { singName: "Shots" }
        ListElement { singName: "Catch My Breath" }
        ListElement { singName: "天外来物" }
        ListElement { singName: "夏天的歌" }
        ListElement { singName: "这个是显示箭头的位置" }
    }
    ListModel {
        id: hotSearchSingModel
        ListElement { singName: "在你的身边" }
        ListElement { singName: "夏天" }
        ListElement { singName: "哪里都是你" }
        ListElement { singName: "我不配" }
        ListElement { singName: "素颜" }
        ListElement { singName: "Shots" }
        ListElement { singName: "Catch My Breath" }
        ListElement { singName: "天外来物" }
        ListElement { singName: "夏天的歌" }
        ListElement { singName: "安静" }
        ListElement { singName: "靠近" }
        ListElement { singName: "七里香" }
        ListElement { singName: "爱错" }
    }

    Popup {
        id: searchPop
        width: parent.width
        height: 700
        y: searchTextField.height + 10
        clip: true
        background: Rectangle {
            anchors.fill: parent
            radius: 10
            color: "#2d2d37"

            Flickable {
                anchors.fill: parent
                contentHeight: 1000
                ScrollBar.vertical: ScrollBar {
                    anchors.right: parent.right
                    anchors.rightMargin: 5
                    width: 10
                    contentItem: Rectangle {
                        visible: parent.active
                        implicitWidth: 10
                        radius: 4
                        color: "#42424b"
                    }
                }
                ScrollBar.horizontal: ScrollBar {
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: 5
                    height: 10
                    contentItem: Rectangle {
                        visible: parent.active
                        implicitHeight: 10
                        radius: 4
                        color: "#42424b"
                    }
                }


                Column {
                    anchors.fill: parent
                    spacing: 40

                    Item {
                        id: historyTotalItem
                        anchors.left: parent.left
                        anchors.right: parent.right
                        height: historyItem.implicitHeight + singFlow.implicitHeight + 50

                        Item {
                            id: historyItem
                            anchors.left: parent.left
                            anchors.right: parent.right
                            anchors.top: parent.top
                            anchors.topMargin: 30
                            anchors.leftMargin: 30

                            Label {
                                id: searchLabel
                                color: "#7f7f85"
                                text: qsTr("搜索历史")
                                font.pixelSize: 18
                                font.family: BasicConfig.commFont
                            }
                            Image {
                                id: removeIconImg
                                anchors.right: parent.right
                                anchors.rightMargin: 30
                                anchors.verticalCenter: searchLabel.verticalCenter
                                source: "qrc:/img/Resources/searchBox/remove.png"
                                width: 30
                                height: 30
                                MouseArea {
                                    anchors.fill: parent
                                    onClicked: {
                                        searchSingModel.clear()
                                    }
                                }
                            }
                        }

                        Flow {
                            id: singFlow
                            anchors.top: historyItem.bottom
                            anchors.left: historyItem.left
                            anchors.right: historyItem.right
                            anchors.topMargin: 40
                            spacing: 10
                            Repeater {
                                id: historyRep
                                anchors.fill: parent
                                model: searchSingModel
                                property bool showAll: false
                                delegate: Rectangle {
                                    width:  dataLabel.implicitWidth + 20
                                    height: 40
                                    border.width: 1
                                    border.color: "#45454e"
                                    color: "#2d2d37"
                                    radius: 15
                                    visible: index < (historyRep.showAll ? 10 : 7)
                                    Label {
                                        id: dataLabel
                                        text: undefined===singName?"":(historyRep.showAll?(index===9?">":singName):(index===6?">":singName))
                                        rotation: historyRep.showAll?(index===9?-90:0):(index===6?90:0)
                                        font.pixelSize: 20
                                        anchors.centerIn: parent
                                        color: "#ddd"
                                        font.family: BasicConfig.commFont
                                        height: 25
                                    }
                                    MouseArea {
                                        anchors.fill: parent
                                        hoverEnabled: true
                                        onEntered: {
                                            dataLabel.color = "white"
                                            parent.color = "#393943"
                                            cursorShape = Qt.PointingHandCursor     // 将鼠标指针变为手指
                                        }
                                        onExited: {
                                            dataLabel.color = "#ddd"
                                            parent.color = "#2d2d37"
                                            cursorShape = Qt.ArrowCursor
                                        }
                                        onClicked: {
                                            if (historyRep.showAll && index === 9) {
                                                historyRep.showAll = false;
                                            } else if (!historyRep.showAll && index === 6){
                                                historyRep.showAll = true
                                            } else {
                                                searchTextField.text = singName
                                                searchPop.close()
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }


                    Item {
                        id: singListItem
                        anchors.left: parent.left
                        anchors.right: parent.right
                        height: searchPop.height - historyTotalItem.implicitHeight
                        Label {
                            id: hotSearchLabel
                            color: "#7f7f85"
                            text: qsTr("热搜榜")
                            anchors.left: parent.left
                            anchors.leftMargin: 30
                            height: searchLabel.implicitHeight
                            font.pixelSize: 18
                            font.family: BasicConfig.commFont
                        }

                        Column {
                            anchors.top: hotSearchLabel.bottom
                            anchors.left: parent.left
                            anchors.right: parent.right
                            anchors.bottom: parent.bottom
                            anchors.topMargin: 20
                            Repeater {
                                model: hotSearchSingModel
                                delegate: Rectangle {
                                    width: singFlow.implicitWidth
                                    height: 40
                                    color: "transparent"
                                    Label {
                                        id: hotSearchIndexLabel
                                        color: index < 3 ? "#eb4d44" : "#818187"
                                        text: String(index + 1)
                                        anchors.left: parent.left
                                        anchors.leftMargin: 20
                                        anchors.verticalCenter: parent.verticalCenter
                                        font.pixelSize: 18
                                        font.family: BasicConfig.commFont
                                    }
                                    Label {
                                        id: hotSearchNameLabel
                                        color: "#ddd"
                                        text: singName
                                        anchors.left: hotSearchIndexLabel.right
                                        anchors.leftMargin: 30
                                        anchors.verticalCenter: parent.verticalCenter
                                        font.pixelSize: 18
                                        font.family: BasicConfig.commFont
                                    }

                                    MouseArea {
                                        anchors.fill: parent
                                        hoverEnabled: true
                                        onEntered: {
                                            parent.color = "#393943"
                                            cursorShape = Qt.PointingHandCursor
                                        }
                                        onExited: {
                                            parent.color = "transparent"
                                            cursorShape = Qt.ArrowCursor
                                        }
                                        onClicked: {
                                            searchTextField.text = singName
                                            searchPop.close()
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }


    Rectangle {
        id: soundHoundRect
        height: backForwardRect.height
        width: height
        color: "#241c26"
        border.color: "#36262f"
        border.width: 1
        radius: 8
        Image {
            id: recordImg
            anchors.centerIn: parent
            source: "qrc:/img/Resources/title/record.png"
            width: parent.width
            height: parent.height
            scale: 0.8
            layer.enabled: false
            layer.effect: ColorOverlay {
                source: recordImg
                color: "white"
            }
            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                onEntered: {
                    recordImg.layer.enabled = true
                }
                onExited: {
                    recordImg.layer.enabled = false
                }
            }
        }
    }
}
